<template>
	<div class="card-container">
		<div class="card-layout">
			<!-- 标题 -->
			<div class="title-view" @click="toDetail && toDetailClick()">
				{{ chartTitle }}
				<img v-if="toDetail" class="title-to-detail" :src="imgDetail" />
			</div>
			<div v-if="showRouteDetail" @click="showRouteInfo" id="routeDetailTitle" class="route-detail">航线详情</div>
			<div v-if="showRouteDetail">
				<route-dialog v-model="showRouteDialog" :scrollTop="scrollTop"></route-dialog>
			</div>
			<!-- tab标签 -->
			<div class="tab-layout hor-layout-center" :class="[{ 'tab-below': tabBelow }, { 'tab-below-route_detail': showRouteDetail }]">
				<div @click="onTabSelectClick(index)" class="tab-tag-item ver-layout-center" v-for="(item, index) in tabList">
					<div :class="[{ 'text-sel': index == tabSelIndex }]" class="tab-tag-text">{{ item.name }}</div>
					<div :class="[{ 'line-sel': index == tabSelIndex }]" class="tab-tag-line"></div>
				</div>
			</div>
			<!-- 图表 -->
			<div :id="randomId" :class="[{ 'chart-below': tabBelow }, { 'chart-below-route_detail': showRouteDetail }]" style="width:345px;height: 244px"></div>
			<!-- 信息布局 -->
			<div class="info-view hor-layout-center" v-if="showMonthData">
				<div class="info-month-total-view ver-layout">
					<div class="info-value-1">{{ monthData.num }}</div>
					<div class="info-key-1">本月累计(万人)</div>
				</div>
				<div class="info-divider-line"></div>
				<div class="info-month-period-view ver-layout">
					<div class="info-value-1">{{ monthData.tqNum }}</div>
					<div class="info-key-1">本月同期(万人)</div>
				</div>
				<div class="info-divider-line"></div>
				<div class="info-month-tb ver-layout">
					<div class="info-value-2 hor-layout-center">
						<img style="width: 8px;height: 15px" :src="monthData.grow ? imgUp : imgDown" />
						<span :style="{ color: monthData.grow ? '#EE4E4E' : '#38B289' }">{{ monthData.ratioVal }}</span>
					</div>
					<div class="info-key-1">本月同比</div>
				</div>
			</div>
			<!-- 完成率-->
			<div class="complete-view hor-layout-center" v-if="showComplete">
				<div class="complete-title">本月完成率</div>
				<div class="complete-progress-view">
					<span class="progress__portion" :style="{ width: monthData.completionRateMonth }"></span>
				</div>
				<div class="complete-value">{{ monthData.completionRateMonth }}</div>
			</div>
		</div>
	</div>
</template>

<script src="./indexJs.js"></script>

<style scoped>
	.card-container {
		width: 100%;
	}

	.card-layout {
		width: 345px;
		background: rgba(255, 255, 255, 1);
		border-radius: 6px;
		margin: auto;
		position: relative;
	}

	.title-view {
		width: fit-content;
		font-size: 21px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(64, 65, 68, 1);
		line-height: 29px;
		padding-top: 15px;
		margin-left: 18px;
	}

	.title-to-detail {
		width: 17px;
		height: 17px;
		margin-left: 13px;
	}

	.tab-layout {
		position: absolute;
		right: 5px;
		top: 22px;
	}

	.tab-below {
		top: 55px;
	}

	.tab-below-route_detail {
		top: 70px;
	}

	.tab-tag-item {
		margin: 0px 10px;
	}

	.tab-tag-text {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(144, 144, 144, 1);
		line-height: 20px;
	}

	.text-sel {
		color: rgba(36, 130, 233, 1);
	}

	.tab-tag-line {
		width: 16px;
		height: 3px;
		margin-top: 2px;
		visibility: hidden;
		background: rgba(36, 130, 233, 1);
	}

	.line-sel {
		visibility: visible;
	}

	.chart-below {
		margin-top: 31px;
	}

	.chart-below-route_detail {
		margin-top: 51px;
	}

	.info-view {
		height: 47px;
		margin-left: 27px;
		margin-right: 27px;
		padding-bottom: 20px;
		justify-content: space-between;
	}

	.info-divider-line {
		width: 1px;
		height: 33px;
		background: #eaedf3;
	}

	.info-month-total-view {}

	.info-month-period-view {}

	.info-month-tb {}

	.info-value-1 {
		font-size: 22px;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: rgba(64, 65, 68, 1);
		line-height: 26px;
	}

	.info-value-2 {
		font-size: 22px;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: rgba(56, 178, 137, 1);
		line-height: 26px;
	}

	.info-key-1 {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(58, 58, 58, 1);
		line-height: 20px;
	}

	.complete-view {
		margin-left: 22px;
		padding-bottom: 24px;
	}

	.complete-title {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(64, 65, 68, 1);
		line-height: 20px;
	}

	.complete-value {
		font-size: 14px;
		font-family: ArialMT;
		color: rgba(64, 65, 68, 1);
		line-height: 16px;
		margin-right: 20px;
		margin-left: 6px;
	}

	.complete-progress-view {
		flex: 1;
		height: 8px;
		position: relative;
		margin-left: 7px;
		background: #ebedf0;
		border-radius: 0.10667rem;
	}

	.progress__portion {
		position: absolute;
		left: 0;
		height: 100%;
		background: #1989fa;
		border-radius: inherit;
	}

	.route-detail {
		position: absolute;
		right: 5px;
		top: 22px;
		font-size: 13px;
		line-height: 18px;
		padding: 2px 13px;
		border-radius: 11px;
		color: rgba(36, 130, 233, 1);
		background: rgba(235, 243, 255, 1);
		border: 1px solid rgba(36, 130, 233, 1);
	}
</style>
